<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #box {
            position: absolute;
            height: 20px;
            width: 200px;
            background-color: pink;
        }
    </style>
    <script>
        window.onload = function() {
            var speed = 10;
            var dir = 0;
            setInterval(function() {
                switch (dir) {
                    case 37:
                        box.style.left = box.offsetLeft - speed + 'px';
                        break;
                    case 39:
                        box.style.left = box.offsetLeft + speed + 'px';
                        break;
                    case 38:
                        box.style.top = box.offsetTop - speed + 'px';
                        break;
                    case 40:
                        box.style.top = box.offsetTop + speed + 'px';
                        break;
                }
            }, 30)
            document.onkeydown = function(event) {

                if (event.ctrlKey) {
                    speed = 100;
                } else {
                    speed = 10;
                }
                dir = event.keyCode;
            }
            document.onkeyup = function(event) {
                    dir = 0;
                }
                // var box = document.getElementById('box');
                // console.log(box);
                // document.onkeydown = function(event) {
                //     console.log(event.keyCode);
                //     event = event || window.event;
                //     switch (event.keyCode) {
                //         case 37:
                //             box.style.left = box.offsetLeft - 10 + 'px';
                //             break;
                //         case 39:
                //             box.style.left = box.offsetLeft + 10 + 'px';
                //             break;
                //         case 38:
                //             box.style.top = box.offsetTop - 10 + 'px';
                //             break;
                //         case 40:
                //             box.style.top = box.offsetTop + 10 + 'px';
                //             break;
                //     }
                // }
        }
    </script>
</head>

<body>
    <div id="box">

    </div>
</body>

</html>